<script setup lang="js">
import {ref, onMounted, computed, reactive} from 'vue'
import {policy} from '@/api/preferenceArea'
import {Plus} from "@element-plus/icons-vue";

const props = defineProps({
  //图片属性数组
  value: Array,
  //最大上传图片数量
  maxCount:{
    type:Number,
    default:5
  }
})
const  dataObj = reactive({
    policy: '',
    signature: '',
    key: '',
    ossaccessKeyId: '',
    dir: '',
    host: ''
})
const dialogVisible = ref(false)
const dialogImageUrl = ref(null)
const useOss = ref(false) //使用oss->true;使用MinIO->false
const ossUploadUrl = ref('http://macro-oss.oss-cn-shenzhen.aliyuncs.com')
const minioUploadUrl = ref('http://localhost:8080/minio/upload')
</script>

<template>
  <el-upload
      :action="useOss?ossUploadUrl:minioUploadUrl"
      :data="useOss?dataObj:null"
      list-type="picture-card"
      :file-list="fileList"
      :before-upload="beforeUpload"
      :on-remove="handleRemove"
      :on-success="handleUploadSuccess"
      :on-preview="handlePreview"
      :limit="maxCount"
      :on-exceed="handleExceed"
  >
    <el-icon><Plus/></el-icon>
  </el-upload>
  <el-dialog :visible.sync="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</template>

<style scoped lang="scss">

</style>